<style media="screen">
.head-container{
  position: relative;
  padding: 10px 0 14px;
}
.head-container .mes{
  overflow: hidden;
  margin-right: 10px;
  float: left;
}
.head-container .mes p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .mes input{
  width: 220px;
  height: 34px;
}
.head-container .flow{
  float: left;
  margin-right: 10px;
}
.head-container .flow p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .flow .flow-select{
  width: 140px;
  height: 34px;
}
.head-container .button-group{
  padding-top: 23px;
}
.hl-date-text{
  box-shadow: none;
  height: 34px;
  padding-left: 4px;
  background-color: #F9F9F9;
  border-radius: 4px;
  border: none;
}
</style>

<section id="report_bi">
  <hl-page-header title="收入报表">
    <hl-button type="outline" @on-click="incomeExport" v-if="quanxian.indexOf('c178') > -1">导出</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>信息搜索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input
            autocomplete="off"
            type="text"
            class="global_ipt_text js-client-name"
            placeholder="客户名称/合同名称/费项"
            v-model="keyword"
          />
        </div>
      </div>
      <div class="flow">
        <p>费项</p>
				<hl-select :data="costitemList" v-model="expense_name" width="140" @on-change="selectcostitem"></hl-select>

      </div>
      <div class="flow">
        <p>支付时间</p>
        <div class="pull-left" style="width: 120px;">
          <web-calendar v-model="payment_begin_time" tips="起始时间"></web-calendar>
        </div>
        <div class="pull-left" style="padding:6px 5px 0;">至</div>
        <div class="pull-left" style="width: 120px;">
          <web-calendar v-model="payment_end_time" tips="截止时间"></web-calendar>
        </div>
      </div>
      <div class="flow" v-show="isExtenseFlag">
        <p>账单类型</p>
				<hl-select :data="billlist" v-model="bill_type" width="140" @on-change="selectbill"></hl-select>
      </div>
      <div class="flow" v-show="isExtenseFlag">
        <p>合同类型</p>
				<hl-select :data="resourceList" v-model="contract_type" width="140" @on-change="selectresource"></hl-select>
      </div>

      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="mt-10" v-show="isExtenseFlag">
      <div class="flow">
        <p>资源选择</p>
				<div class="dy-flex">
					<hl-select :data="companyList" v-model="companyId" width="120" @on-change="selectcompany" class="mr-10"></hl-select>
					<hl-select :data="ProjectList" v-model="projectId" width="120" @on-change="selectproject" class="mr-10"></hl-select>
					<hl-select :data="buildingList" v-model="buildingId" width="120" @on-change="selectbuilding" class="mr-10"></hl-select>
					<hl-select :data="floorList" v-model="floorId" width="120" @on-change="selectfloor" class="mr-10"></hl-select>
					<hl-select :data="unitList" v-model="unitId" width="120" @on-change="selectunit"></hl-select>
				</div>

      </div>

      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </div>

  <div class="rent-content br-4 global_table" style="padding:0;">
    <table>
      <thead>
        <tr class="global_table_title">
          <th rowspan="2">序</th>
          <th rowspan="2">账单类型</th>
          <th rowspan="2">账期</th>
          <th rowspan="2">单元名称</th>
          <th rowspan="2">租约期</th>
          <th rowspan="2">付款截止日期</th>
          <th rowspan="2">客户名称</th>
          <th rowspan="2">纳税人识别号/身份证号</th>
          <th rowspan="2">联系电话</th>
          <th rowspan="2">通讯地址</th>
          <th rowspan="2">租赁面积（㎡）</th>
          <th rowspan="2">租赁单价</th>
          <th colspan="3">押金/保证金（元）</th>
          <th colspan="3">租金（元）</th>
          <!-- <th colspan="3">营业额抽成（元）</th> -->
          <th colspan="3">意向金</th>
          <th :colspan="costitemList0.length+2">其他费项（元）</th>
          <th colspan="2">总计（元）</th>
        </tr>
        <tr class="global_table_title">
					<!-- 押金，保证金 -->
          <th>合计应收</th>
          <th>合计实收</th>
          <th>合计应退</th>
					<!-- 租金 -->
          <th>合计应收</th>
          <th>合计实收</th>
          <th>合计应退</th>
					<!-- 营业额抽成 -->
					<!-- <th>合计应收</th>
					<th>合计实收</th>
					<th>合计应退</th> -->
					<!-- 意向金 -->
          <th>合计应收</th>
          <th>合计实收</th>
          <th>合计应退</th>
          <th v-for="item in costitemList0" >{{item.expenseName}}</th>
          <th>合计应收</th>
          <th>合计实收</th>
          <th>总应收</th>
          <th>总实收</th>
        </tr>
        <thead>
        <tbody>
          <tr v-for="(item,index) in incomeList" class="global_table_item">
            <td>{{index+1}}</td>
            <td>{{item.billType | billTypeText}}</td>
            <td>{{item.billBeginDate | formatDate}}至{{item.billEndDate | formatDate}}</td>
            <td>{{item.unitNames}}</td>
            <td>{{item.contractBeginDate | formatDate}}至{{item.contractEndDate | formatDate}}</td>
            <td>{{item.paymentDeadline | formatDate}}</td>
            <td>{{item.zlfName}}</td>
            <td>{{item.idcode || '--'}}</td>
            <td>{{item.zlfPhone}}</td>
            <td>{{item.address}}</td>
            <td>{{item.unitAcreage}}</td>
            <td>{{item.rentPrice}}元/平米/{{item.rentPriceUnit == 'D'?'天':'月'}}</td>
            <!-- 押金，保证金 -->
            <td>{{item.depositeReceive}}</td>
            <td>{{item.depositePayed}}</td>
            <td>{{item.depositeRefund}}</td>
            <!-- 租金 -->
            <td>{{item.zjReceive}}</td>
            <td>{{item.zjPayed}}</td>
            <td>{{item.zjRefund}}</td>

						<!-- 营业额抽成 -->
						<!-- <td>{{item.zjReceive}}</td>
						<td>{{item.zjPayed}}</td>
						<td>{{item.zjRefund}}</td> -->

            <!-- 意向金 -->
            <td>{{item.intentReceive}}</td>
            <td>{{item.intentPayed}}</td>
            <td>{{item.intentRefund}}</td>


            <td v-for="(single,one) in item.expenses">{{single.amountReceive}}</td>
            <td>{{item.expenseReceive}}</td>
            <td>{{item.expensePayed}}</td>
            <td>{{item.amountReceive}}</td>
            <td>{{item.amountPayed}}</td>
          </tr>
        </tbody>
    </table>
  </div>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="selectPerNum"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <ul class="page" id="page"></ul>
    </div>
  </div>


</section>

<script src="modules/report_bi/scripts/income.js" charset="utf-8"></script>

<style media="screen">
  .icon-Gm-calendar:before {
    right: 0;
    top: 0;
  }

  input::-webkit-input-placeholder {
    color: #999;
  }

  input:-moz-placeholder {
    color: #999;
  }

  input:-ms-input-placeholder {
    color: #999;
  }
</style>
